<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
</head>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">


<link rel="stylesheet" href="../../../css/bootstrap-table.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



<script src="../../../js/bootstrap-table.min.js"></script>

<script src="../../../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../../../js/jquery-form.js"></script>
<body style="background: rgba(0,0,0,0.07)">
<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">请选择修改的头像</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="form-inline">'
                    <form id="fileUpForm" method="post" enctype="multipart/form-data">
                    <label>请选择头像</label>
                    <input type="file" name="imgfile" class="form-control">
                    <input type="button" class="btn btn-primary"onclick="tijiaofile()" value="提交" >
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 个人资料 -->
<div style="display: flex">
    <div class="card" style="width: 39%;height: 500px;">
        <div class="card-header bg-info text-white">个人资料</div>
        <div class="card-body">
            <div style="display: flex;justify-content: center">
                <img data-toggle="modal" data-target="#myModal" id="login_img" src="/img/aa.jpg" class="rounded-circle" height="180px;" width="180px;">
            </div>

            <div style="display: flex;justify-content: center;margin-top: 15px;">
                <a href="#" data-toggle="modal" data-target="#myModal">修改头像</a>
            </div>

            <div  style="margin-top: 20px;border: 1px solid black;border-left: none;border-right: none;display: flex;height: 40px;align-items: center">
                <svg class="bi bi-person-fill" width="25" height="25" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                </svg>
                <div style="margin-left: 1%;width: 100%">
                    <span style="float: left;width: 40%">登录用户：</span>
                    <span style="float: right;margin-right: 5%;" id="login_userid">admin</span>
                </div>
            </div>
            <div style="border: 1px solid black;border-left: none;border-right: none;border-top:none;display: flex;height: 40px;align-items: center">
                <svg class="bi bi-lock-fill" width="25" height="25" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <rect width="11" height="9" x="2.5" y="7" rx="2"/>
                    <path fill-rule="evenodd" d="M4.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
                </svg>
                <div style="margin-left: 1%;width: 100%">
                    <span style="float: left;width: 40%">登录密码：</span>
                    <span style="float: right;margin-right: 5%;">********</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="width: calc(100% - 180px);margin-left: 2%;height: 400px;">
        <div class="card-header bg-info text-white">基本资料</div>
        <div class="card-body">

            <div class="card" style="display: flex;height: 300px;">
                <div style="display: flex;margin-left: 1%;">
                    <h6 style="font-size: 20px;border-top: 3px solid dodgerblue;width: 11%;display: flex;align-items: center;justify-content:center;height: 40px;">修改密码</h6>
                </div>
                <div style="margin-left: 5%;" class="form-inline" >
                    <span style="float:right;width: 13%">旧密码：</span>
                    <input data-toggle="tooltip" title="请输入正确的密码!" id="login_oldpassword" type="text" class="form-control"  placeholder="请输入旧密码" style="width: calc(90% - 13%);float:left;">
                </div>
                <div style="margin-left: 5%;margin-top: 1%;" class="form-inline">
                    <span style="float:right;width: 13%">新密码：</span>
                    <input data-toggle="tooltip" title="请输入新密码!" id="newpassword" type="text" class="form-control"  placeholder="请输入新密码" style="width: calc(90% - 13%)">
                </div>
                <div style="margin-left: 5%;margin-top: 1%;" class="form-inline">
                    <span style="float:right;width: 13%">确定密码：</span>
                    <input data-toggle="tooltip" title="两次必须一致!" id="cxsrnewpassword" type="text" class="form-control"  placeholder="请确定密码" style="width: calc(90% - 13%)">
                </div>
                <div style="margin-top: 2%;margin-left: 20%">
                    <button class="btn btn-info" id="update_login_ok">保存</button>
                    <button class="btn btn-success">关闭</button>
                </div>

            </div>

        </div>
    </div>
</div>
<script>

    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    $(function () {
        $.ajax({
            type:"post",
            url:"/SysUser/queryUser",
            success:function (users) {
                $("#login_img").prop("src",users.photoPath);
                $("#login_userid").text(users.loginId);
            }
        })
    })
    //修改头像
    function tijiaofile(){
        $("#fileUpForm").ajaxSubmit({
            type:"post",
            url:"/sys/xiugaitouxiang",
            success:function (vl) {

                    window.location.reload();
                  window.parent.$("#userPhotoPath").prop("src",vl.photoPath);
            }
        })
    }

    //修改密码
    $(function () {
        //查询输入密码是否与数据库密码是否一致
        $("#update_login_ok").click(function () {
            $.ajax({
                type:"post",
                url:"/sys/checkpasswordmm",
                data:"password="+$("#login_oldpassword").val(),
                success:function (yn) {
                  if(yn==1){
                     if($("#newpassword").val()==$("#cxsrnewpassword").val() && $("#cxsrnewpassword").val()!=null && $("#cxsrnewpassword").val()!='' && $("#newpassword").val()!=null && $("#newpassword").val()!=''){
                        $.ajax({
                            type:"post",
                            url:"/sys/updatepasswordsys",
                            data:"password="+$("#cxsrnewpassword").val(),
                            success:function (v) {
                                alert("修改成功")
                                window.parent.location.href="/logout"
                            }
                        })
                     }else{
                         alert("输入为空或者两次密码不一致，请重新输入")
                     }
                  }else{
                      $("#login_oldpassword").val("");
                      alert("旧密码错误请重新输入旧密码")
                  }
                }
            })
        })
    })

</script>
</body>
</html>